<template>
  <div class="page_wrap">
    <div class="index_row">
      <div class="titel">手机号注册</div>
      <div class="input_wrap">
        <div>
          <el-input
            style="width: 420px"
            prefix-icon="el-icon-user-solid"
            clearable
            v-model="loginform.username"
            placeholder="请输入登录手机号"
          ></el-input>
        </div>
        <div class="inpt_flex">
          <el-input
           style="width: 300px"
            show-password
            prefix-icon="el-icon-s-claim"
            clearable
            v-model="loginform.userpass"
            placeholder="请输入验证码"
          ></el-input>
          <div class="yzm">
              <div>
                  <div>获取验证码</div>
              </div>
          </div>
        </div>
        <div>
          <el-input
            style="width: 420px"
            show-password
            prefix-icon="el-icon-s-goods"
            clearable
            v-model="loginform.userpass"
            placeholder="请输入登录密码"
          ></el-input>
        </div>
      </div>
      <div class="input_but">
        <div class="input_text">
          <div>注册</div>
        </div>
      </div>
      <div class="foot_warp">
        <div class="foot_text" @click="haldregister(3)">切换到邮箱注册</div>
        <div class="foot_right">
          <div>想起密码了？</div>
          <div class="foot_text" @click="haldregister(1)">去登录</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginform: {
        username: "",
        userpass: "",
      },
    };
  },
  methods: {
    haldregister(item) {
      this.$emit("hanldlogin", item);
    },
  },
};
</script>
<style scoped>
.index_wrap {
  width: 100%;
  min-width: 898px;
  min-height: 100vh;
  background-color: #f6f6f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.index_mian {
  width: 640px;
  height: 540px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.titel {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.input_wrap {
  line-height: 70px;
}
/* /deep/ .el-input {
  width: 420px !important;
} */
/deep/ .el-input__inner {
  height: 46px !important;
  font-size: 18px;
}
/deep/.el-input--prefix .el-input__inner {
  padding-left: 40px;
}
.input_but {
  margin-top: 20px;
  width: 420px;
  background-color: #3dbbb8;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.input_text {
  color: #fff;
  font-size: 20px;
}
.foot_warp {
  margin-top: 20px;
  width: 420px;
  display: flex;
  justify-content: space-between;
}
.foot_text {
  color: #2e82ff;
}
.foot_right {
  display: flex;
  justify-content: space-between;
}
.foot_text:active {
  opacity: 0.8;
}
.foot_text:hover {
  cursor: pointer;
}
.inpt_flex {
  display: flex;
  align-items: center;
}
.yzm {
    height: 45px;
    width: 118px;
    border: 1px solid #dcdfe6;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.yzm:hover {
    cursor: pointer;
}
.yzm:active{
    opacity: 0.8;
}
</style>